<template>
  <div class="nav-bar">
    <div class="left">
      <slot name="left">
        <van-icon v-show="isBack" name="arrow-left" @click="goBack" />
      </slot>
    </div>
    <div class="cneter">
      <slot name="cneter">
        <!-- 当有相同标签名的元素切换时，需要通过 key 特性设置唯一的值来标记以让 Vue 区分它们 -->
        <transition name="fade" mode="out-in">
          <div v-if="!search" key="box1" class="title">
            <p v-if="isTitle"> {{ title || prosTitle||"无" }}</p>
            <p class="tips">{{ tips }}</p>
          </div>

          <div v-else key="box2" class="search-warp">
            <van-search v-model="value" shape="round" input-align="center" placeholder="请输入搜索关键词" @search="goSearch" />
          </div>
        </transition>
      </slot>
    </div>

    <div class="right">
      <slot name="right">
        <svg-icon v-show="isSearch" icon-class="search" @click="showSearch" />
      </slot>
    </div>

  </div>
</template>

<script>
import { Search } from 'vant'
export default {
  components: {

    [Search.name]: Search
  },
  props: {
    isBack: {
      type: Boolean,
      default: true
    },
    isCustom: {
      type: Boolean,
      default: false
    },
    isSearch: {
      type: Boolean,
      default: false
    },
    prosTitle: {
      type: String,
      default: null
    },
    tips: {
      type: String,
      default: null
    },
    isTitle: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      show: false,
      search: false,
      value: ''
    }
  },
  computed: {
    title() {
      let title = ''
      if (this.$route.meta && this.$route.meta.title) {
        title = this.$route.meta.title
      }
      return title
    }
  },
  methods: {
    showSearch() {
      this.search = !this.search
    },
    goSearch() {
      this.$toast('功能开发中')
      return
      // this.$emit('search', this.value)
    },
    goBack() {
      if (this.isCustom) {
        this.$emit('goBack')
      } else {
        this.$router.go(-1)
      }
    },
    openKefu() {
      this.show = true
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep.nav-bar {
  width: 100%;
  border-bottom: 1px solid $BorderC;
  background-color: #FEFEFE;
  position: relative;
  .left {
    position: absolute;
    left: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 45px;
    justify-content: center;
  }
  .right {
    position: absolute;
    right: 10px;
    height: 100%;
    display: flex;
    align-items: center;
    font-size: 45px;
    justify-content: center;
  }
  .cneter {
    padding: 0 80px;
    text-align: center;
    .title {
      font-weight: bold;
      height: calc(49.9688px * 2);
      display: flex;
      flex-direction: column;
      justify-content: center;
      font-size: 35px;
      .tips{
        font-weight: normal;
        font-size: 24px;
        color: red;
      }
    }
  }
  .search-warp {
    background-color: #fff;
    .van-search{
      padding-top: 2.1vw;
      padding-bottom: 2.1vw;
    }
  }
}
.fade-enter-active {
  transition: all 0.2s ease;
}
.fade-leave-active {
  transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1);
}
.fade-enter, .fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
